import React, { useEffect } from 'react';
import { Modal, Form, Input, InputNumber, Button, message } from 'antd';
import { ParameterCategory, ParameterCategoryCreate, ParameterCategoryUpdate } from '../../types';

interface CategoryFormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: ParameterCategoryCreate | ParameterCategoryUpdate) => Promise<void>;
  initialValues?: ParameterCategory;
  title: string;
}

const CategoryForm: React.FC<CategoryFormProps> = ({
  visible,
  onCancel,
  onSubmit,
  initialValues,
  title
}) => {
  const [form] = Form.useForm();

  // 当 initialValues 变化时，更新表单值
  useEffect(() => {
    if (visible) {
      if (initialValues) {
        // 编辑模式：设置表单值
        const values = {
          ...initialValues,
          sort_order: initialValues.sort_order ?? 0
        };
        form.setFieldsValue(values);
      } else {
        // 新增模式：清空表单，明确设置所有字段为空
        form.resetFields();
        form.setFieldsValue({
          name: '',
          name_en: '',
          description: '',
          sort_order: 0
        });
      }
    } else {
      // 对话框关闭时只重置状态，不操作 form（因为 Form 组件可能已卸载）
      // form 会在下次打开时自动重置
    }
  }, [visible, initialValues?.id]);

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      // 设置默认的 sort_order
      if (values.sort_order === undefined || values.sort_order === null) {
        values.sort_order = 0;
      }
      await onSubmit(values);
      form.resetFields();
    } catch (error) {
      console.error('Form validation failed:', error);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={handleCancel}
      onOk={handleSubmit}
      okText="确定"
      cancelText="取消"
      width={600}
      destroyOnHidden
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={initialValues ? { ...initialValues, sort_order: initialValues.sort_order ?? 0 } : { sort_order: 0 }}
        requiredMark={false}
      >
        <Form.Item
          name="name"
          label="分类中文名称"
          rules={[
            { required: true, message: '请输入分类中文名称' },
            { max: 100, message: '分类名称不能超过100个字符' }
          ]}
        >
          <Input placeholder="请输入分类中文名称" />
        </Form.Item>

        <Form.Item
          name="name_en"
          label="分类英文名称"
          rules={[
            { required: true, message: '请输入分类英文名称' },
            { max: 100, message: '分类英文名称不能超过100个字符' },
            { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: '英文名称必须符合Python变量名规则：只能包含字母、数字和下划线，且不能以数字开头' }
          ]}
        >
          <Input placeholder="请输入分类英文名称" />
        </Form.Item>

        <Form.Item
          name="description"
          label="分类描述"
          rules={[
            { max: 500, message: '分类描述不能超过500个字符' }
          ]}
        >
          <Input.TextArea 
            placeholder="请输入分类描述（可选）" 
            rows={4}
            showCount
            maxLength={500}
          />
        </Form.Item>

        <Form.Item
          name="sort_order"
          label="排序顺序"
          initialValue={0}
          rules={[
            { type: 'number', min: 0, message: '排序顺序必须大于等于0' }
          ]}
        >
          <InputNumber 
            placeholder="数字越大越靠前，默认为0" 
            min={0}
            max={9999}
            style={{ width: '100%' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CategoryForm;
